@import "./styles";

$minHeight: 730px;

body {
  background-color: color('diploma', 'base');
}

.diploma {
  position: relative;
  width: 100%;
  height: 100%;
  @include bg-image('../images/diploma/diploma_bg_top', 'png');

  background: {
    size: contain;
    position: center top;
    repeat: no-repeat;
    color: color('diploma', 'base');
  }
  overflow: hidden;

  &-title {
    @include position(absolute, 5% 0 null);
    width: rem(452);
    //height: rem(92);
    margin: auto;
    //@include bg-image('../images/diploma/diploma_title', 'png');
    //background: {
    //  size: contain;
    //  position: center;
    //  repeat: no-repeat;
    //}
    @include min-screen-height($minHeight) {
      top: 6%;
    }
    @include transition(all 1s linear);
  }
  &-top {
    @include position(absolute, 16.5% 0 null);
    width: rem(392);
    //height: rem(376);
    margin: auto;
    //@include bg-image('../images/diploma/diploma_star', 'png');
    //background: {
    //  size: contain;
    //  position: center;
    //  repeat: no-repeat;
    //}
    //@include transition(all 1s linear);

    @include min-screen-height($minHeight) {
      width: rem(392*1.2);
      top: 18%;
    }
  }

  &-middle {
    @include position(absolute, null 0 20%);
    width: rem(646);
    height: rem(296);
    margin: auto;
    //@include bg-image('../images/diploma/diploma_box', 'png');
    //background: {
    //  size: contain;
    //  position: center;
    //  repeat: no-repeat;
    //}
    //@include min-screen-height($minHeight) {
    //  bottom: 24%;
    //}
    &-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    &-portrait {
      @include position(absolute, -30% 0 null 0);
      width: rem(200);
      height: rem(200);
      margin: auto;
      //@include bg-image('../images/diploma/diploma_halo', 'png');
      //background: {
      //  size: contain;
      //  position: center;
      //  repeat: no-repeat;
      //}
      //transform: translateY(-50%);

      &-halo {
        position: absolute;
        top: 0;
        left: 0rem;
        width: 100%;
        z-index: 1;
      }
      &-header {
        display: block;
        position: relative;
        width: rem(100);
        height: rem(100);
        margin: rem(35) auto;
        border-radius: rem(50);
        z-index: 2;
        //transform: translateY(-50%);
        //@include bg-image('../images/diploma/diploma_header', 'png');
        //background: {
        //  size: contain;
        //  position: center;
        //  repeat: no-repeat;
        //}
      }
      &-upload {
        @include position(absolute, 0);
        width: rem(40);
        height: rem(40);
        margin: auto;
      }
      &-img {
        @include position(absolute, 0);
        width: rem(100);
        height: rem(100);
        margin: auto;
        border-radius: rem(50);
      }
      &_input {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: rem(200);
        height: rem(200);
        z-index: 10;
      }
    }

    &-title {
      width: 100%;
      height: rem(28);
      margin: 0 auto;
      padding: rem(128) 0 rem(20);
      line-height: rem(28);
      font-size: 14px;
      font-size: rem(28);
      text-align: center;
      color: color('diploma', 'font');
    }
    &-content {
      @include display(flex);
      @include justify-content(space-between);
      width: rem(280);
      height: rem(110);
      margin: auto;
      .diploma-middle-color {
        font-size: 12px;
        font-size: rem(24);
        color: color('diploma', 'font');
        text-align: center;
        .dmc-title {
          color: color('diploma', 'dmcTitle');
        }
      }
    }
  }
  &-footer {
    @include position(absolute, null 0 0);
    width: 100%;
    height: rem(240);
    //@include min-screen-height($minHeight) {
    //  bottom: 4%;
    //}
    @include transition(all 1s linear);

    &-code {
      @include position(absolute, null null rem(25) rem(25));
      width: rem(120);
      height: rem(120);
    }
    &-chapter {
      @include position(absolute, 0);
      width: rem(225);
      height: rem(114);
      margin: auto;
      padding-top: rem(24);
      font-size: 12px;
      font-size: rem(24);
      line-height: rem(36);
      color: color("diploma", "dmcTitle");
      text-align: center;
      box-sizing: border-box;
      @include bg-image('../images/diploma/diploma_chapter', 'png');
      background: {
        size: contain;
        position: center;
        repeat: no-repeat;
      }
    }
  }
}

